<template>
    <div id="app">
        <TopBar :key="topbarNum" />
        <Header />
        <router-view />
        <Footer />
        <Login v-show="isShowLoginModal" />
        <transition name="slide">
            <Toast v-show="isShowToast" />
        </transition>
    </div>
</template>

<script>
import { JingpinApi } from "./request/api";
import TopBar from "@/components/Topbar.vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import Login from "@/components/Login.vue";
import Toast from "@/components/Toast.vue";

import { mapState } from "vuex";
export default {
    data() {
        return {
            topbarNum: 1,
        };
    },
    components: {
        Footer,
        Header,
        TopBar,
        Login,
        Toast,
    },
    created() {
        console.log(
            "环境变量",
            process.env.VUE_APP_BASE_URL,
            process.env.VUE_APP_HUXIAO
        );
    },
    computed: {
        ...mapState({
            isShowLoginModal: (state) => state.hdIsShowModal.isShowLoginModal,
            isShowToast: (state) => state.showToast.isShowToast,
        }),
    },
    watch: {
        "$route.path": {
            handler(newVal, oldVal) {
                this.topbarNum++;
            },
        },
    },
};
</script>

<style lang="less">
/* 入场的起始状态 = 离场的结束状态 */
.slide-enter,
.slide-leave-to {
    opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
    transition: opacity 0.3s linear;
}

.slide-enter-to,
.slide-leave {
    opacity: 1;
}
</style>
